<template>
  <div>
    <el-container class="home-container">
      <el-col :span="2"></el-col>
      <el-col :span="20">
        <el-card shadow="always" v-loading="loading">
          <div slot="header">
            <span><h1>Canary-UI</h1></span>
          </div>

          <div style="text-align: left;width: 100%;">
            <codemirror v-model="codem" :options="cmOptions"></codemirror>
          </div>
          <div>
            <el-button style="margin-top: 10px;" @click="changeConfigMapYaml()" size="mini" type="primary">提交yaml</el-button>
          </div>
        </el-card>

      </el-col>
      <el-col :span="2"></el-col>
    </el-container>
  </div>
</template>

<script>
import "codemirror/lib/codemirror.css"; //需要修改height为auto
import "codemirror/mode/css/css.js";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/yaml-frontmatter/yaml-frontmatter.js";
import "codemirror/addon/selection/active-line"; // 代码高亮
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/scroll/simplescrollbars";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/hint/anyword-hint";
import "codemirror/addon/hint/css-hint";
import "codemirror/addon/hint/show-hint.css";
import 'codemirror/theme/rubyblue.css'
import 'codemirror/theme/xq-light.css'
import "codemirror/theme/darcula.css"; // 主题
export default {
  data() {
    return {
      cmOptions: {
        mode: 'yaml',
        lineNumbers: true, // 显示行数
        lint: true,
        indentUnit: 2, // 缩进单位为2
        smartIndent: true, // 自动缩进是否开启
        matchBrackets: true, // 括号匹配
        lineWrapping: true, // 自动换行
        tabSize: 2,
        styleActiveLine: true, // 设置光标所在行高亮
        readOnly: false,
        theme:"darcula",
        scrollbarStyle: "overlay"
      },
      loading:true,
      configmaps: [],
      dialogVisible:false,
      codem:'',
      codemkey:'',
      configmap: {
        key: '',
        value: ''
      },
      namespace: '',
      configmapname: '',
      labelselector: ''
    }
  },
  mounted: function () {
    this.getConfigMap();
    //setTimeout(this.initCodeMirrorEditor,500)
  },

  methods: {
    getConfigMap() {
      this.loading=true;
      var _this = this;
      this.getRequest("/main/configmap").then(resp => {
        if (resp && resp.status == 200) {
          _this.configmaps = resp.data;

          for(let key in _this.configmaps){
            _this.codemkey = key;
            _this.codem =_this.configmaps[key];
          }
          if(_this.configmaps!=null){
            this.dialogVisible=true;
          }
          this.loading=false;
        }
      })
    },

    changeConfigMapYaml()
    {

      this.$confirm('此操作将修改'+this.codemkey+'并重启相关应用,是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let _this = this;
        let configString = _this.codem;
        this.putRequest("/main/configmap", {'configString': configString}).then(resp => {
          if (resp && resp.status == 200) {
            this.getConfigMap();
          }
        })
      }).catch(() => {
      });
    },
    cancelEdit(){
      this.configmaps=null;
    },
  }
};
</script>

<style scoped>
.home-container {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 35px 35px 15px 35px;
}

.yaml-editor {
  height: 800px;
  position: relative;
}

.yaml-editor >>> .CodeMirror {
  height: auto;
  min-height: 800px;
}

.yaml-editor >>> .CodeMirror-scroll {
  min-height: 800px;
}

.yaml-editor >>> .cm-s-rubyblue span.cm-string {
  color: #F08047;
  height: 600px;
}
.cmcss{
  overscroll-y:scroll!important;
  height:auto!important;
}

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: auto!important;
  color: black;
  direction: ltr;
}

</style>
